<template>
    <div>
        <p>{{ reverseMessage }}</p>
        <p>{{ reverseMessage }}</p>
        <p>{{ getMessage() }}</p>
        <p>{{ reverseMessage }}</p>
        <p>{{ getMessage() }}</p>
        <p>{{ getMessage() }}</p>
        <p>{{ getData }}</p>
        <p>{{ getData }}</p>
        <p>{{ getDataT() }}</p>
        <p>{{ getData }}</p>
        <p>{{ getDataT() }}</p>
        <p>{{ getDataT() }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: "Hello, Vue"
        }
    },
    // 计算属性优势:
    // 带缓存
    // 计算属性对应函数执行后, 会把return值缓存起来
    // 依赖项不变, 多次调用都是从缓存取值
    // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
    computed: {
        reverseMessage() {
            console.log("计算属性执行了");
            return this.msg.split("").reverse().join("")
        },
        getData() {
            console.log("计算属性执行了");
            return Date.now()
        }
    },
    methods: {
        getMessage() {
            console.log("函数执行了");
            return this.msg.split("").reverse().join("")
        },
        getDataT() {
            console.log("函数执行了");
            return Date.now()
        }
    }
}
</script>

<style>

</style>
